import Vue from 'vue'
import Component from 'vue-class-component'
import '../modules/product/productStyle.css'

@Component({
  props: {
    defaultSort: Object,
    lists: Array
  }
})

export default class SortViewClass extends Vue {
  containViewHeight = 0
  chooseBools = [true, false, false, false]

  created() {
    if (!this.lists) {
      return
    }
    for (var i = 0; i < this.lists.length; i++) {
      var item = this.lists[i]
      if (item.name === this.defaultSort.name) {
        this.chooseBools = [false, false, false, false]
        this.chooseBools.splice(i, 1, true)
      }
    }
  }

  handlerClickCell (e, index) {
    e.stopPropagation()
    this.chooseBools = [false, false, false, false]
    this.chooseBools.splice(index, 1, true)
    this.$emit('click', index)
  }

  createItems() {
    if (this.lists.length <= 0) {
      return
    }
    const item = this.lists.map((value, index) => {
      return <div onClick={ (e) => this.handlerClickCell(e, index)}>
                <mt-cell title={value.name} >
                  <icon v-show={!this.chooseBools[index]} name='sortUnSelect' scale = '2'/>
                  <icon v-show={this.chooseBools[index]} name='sortSelect' scale = '2'/>
                </mt-cell>
             </div>
    })
    return item
  }

  get caculateHeight () {
    return 'height:' + String(this.containViewHeight) + 'px'
  }

  render () {
    return (
      <div style = 'height:100%;width:100%;position:absolute;background:rgba(0,0,0,.4);z-index:999;' onClick={() => { this.$emit('dismiss') }}>
      <div>
        {this.createItems()}
      </div>
      </div>
    )
  }
}
